<template>
  <div class="car">
    <icon name="arrow-left" @click="$router.go(-1)" />
    <card
      :num="item.count"
      :price="item.newPrice"
      :desc="item.desc"
      :title="item.title"
      :thumb="item.imgURL"
      v-for="(item, index) in carList"
      :key="index"
    >
      <div slot="tag">
        <checkbox
          :value="item.checked"
          @click="updatedOneChecked(item.iid)"
        ></checkbox>
      </div>
      <div slot="footer">
        <v-button
          size="mini"
          type="info"
          round
          color="#ff5777"
          @click="add(item.iid)"
          >+1</v-button
        >
        <v-button
          size="mini"
          type="info"
          round
          color="#ff5777"
          @click="sub(item.iid, index)"
          >-1</v-button
        >
        <v-button
          size="mini"
          type="info"
          round
          color="#ff5777"
          @click="del(index)"
          >删除</v-button
        >
      </div>
    </card>
    <submit-bar :price="allPrice" button-text="提交订单">
      <checkbox
        v-model="allStatus"
        @click="handleClick"
        :disabled="!Boolean(carList.length)"
        >全选</checkbox
      >
    </submit-bar>
  </div>
</template>

<script>
import {
  Card,
  Button as vButton,
  Checkbox,
  Toast,
  SubmitBar,
  Notify,
  Icon
} from "vant";
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "car",
  components: { Card, vButton, Checkbox, Toast, SubmitBar, Icon },
  data() {
    return {
      allStatus: null
    };
  },
  computed: {
    ...mapGetters(["carList", "allChecked", "allPrice"])
  },
  created() {
    this.allStatus = this.allChecked;

    // if (this.carList.length == 0) {
    //   Notify({ type: "warning", message: "购物车为空" });
    // }
  },
  watch: {
    allChecked() {
      this.allStatus = this.allChecked;
    }
  },
  activated() {
    // if (this.carList.length == 0) {
    //   Notify({ type: "warning", message: "购物车为空" });
    // }
  },
  methods: {
    ...mapMutations([
      "addCount",
      "subCount",
      "updatedChecked",
      "updatedOneChecked",
      "delGoods"
    ]),
    sub(iid, index) {
      let num = this.carList[index].count;
      if (num == 1) {
        Toast.fail("至少选择一个");
      } else {
        this.$store.commit("subCount", iid);
      }
    },
    add(iid) {
      this.$store.commit("addCount", iid);
    },
    del(index) {
      this.$store.commit("delGoods", index);
    },
    handleClick() {
      this.$store.commit("updatedChecked", this.allStatus);
    },
    updatedOneChecked(iid) {
      this.$store.commit("updatedOneChecked", iid);
    }
  }
};
</script>

<style scoped>
.van-icon {
  position: fixed;
  top: 15px;
  left: 10px;
  z-index: 1;
  font-size: 20px;
  color: #fff;
}
</style>
